<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>学生社团管理系统</title>
    <link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all">
    <script src="../../../static/layui/layui.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<script type="text/html" id="toolbarDemo">
    <div class="demoTable">
        <div class="layui-inline">
            <select name="sex" id="sex" lay-event="sex" lay-verify="sex" lay-search>
                <option value="男" selected>男</option>
                <option value="女">女</option>
            </select>
        </div>&emsp;&emsp;&emsp;
        <div class="layui-inline">
            <select name="department" lay-event="dept" lay-verify="department" lay-search>
                <option value="网络系" selected>网络系</option>
                <option value="计算机系">计算机系</option>
                <option value="软件系">软件系</option>
                <option value="财会系">财会系</option>
                <option value="国贸系">国贸系</option>
            </select>
        </div>&emsp;&emsp;&emsp;
        <div class="layui-inline">
            <select name="satus" lay-verify="satus" lay-search>
                <option value="普通用户" selected>普通用户</option>
                <option value="管理员">管理员</option>
            </select>
        </div>&emsp;&emsp;&emsp;
        搜索:
        <div class="layui-inline">
            <input class="layui-input" name="keyword" id="keyword" autocomplete="off" placeholder="关键字">
        </div>&emsp;&emsp;
        <button class="layui-btn layui-btn-radius" id="search" lay-event="search"><i class="layui-icon layui-icon-search"></i>搜索</button>&emsp;
        <button class="layui-btn layui-btn-radius" id="adduser" lay-event="adduser"><i class="layui-icon layui-icon-add-1"></i>新增</button>
    </div>
</script>

<script type="text/html" id="tb">
    <a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-radius layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" th:inline="none">
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;
        var layer = layui.layer;
        table.render({
            elem: '#userTable'
            , url: '/system/getusers'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print']
            , title: '用户数据表'
            , cols: [[
                { type: 'checkbox', fixed: 'left' }
                , { field: 'id', title: '编号', width: 120, fixed: 'left', unresize: true, sort: true,align:'center',hide: true}
                , { field: 'deptid', title: '部门号', width: 120, fixed: 'left', unresize: true, sort: true,align:'center',
                    templet: function (d) {
                        switch (d.deptid) {
                            case "001": return d = "管理部"; break;
                            case "002": return d = "采购部"; break;
                            case "003": return d = "销售部"; break;
                            case "004": return d = "库存部"; break;
                            case "005": return d = "财务部"; break;
                        }
                }}
                , { field: 'employeeid', title: '用户号', width: 120, align: 'center' }
                , { field: 'password', title: '密码', width: 120, align: 'center',hide: true}
                , { field: 'employee_Name', title: '姓名', width: 120, align: 'center' }
                , { field: 'duty', title: '职位', width: 200, align: 'center' }
                , { field: 'gender', title: '性别', width: 80, sort: true, align: 'center' }
                , { field: 'birthDate', title: '生日', width: 180, sort: true, align: 'center' }
                , { field: 'hireDate', title: '入职时间', width: 180, sort: true, align: 'center'}
                , { field: 'matureDate', title: '合同到期时间', width: 180, sort: true, align: 'center'}
                , { field: 'phone', title: '手机', width: 150, align: 'center' }
                , { field: 'address', title: '地址', width: 150, align: 'center' }
                , { field: 'email', title: '邮箱', width: 180, align: 'center' }
                //"<div>{{layui.util.toDateString(d.time*1000, 'yyyy/MM/dd HH:mm:ss')}}</div>" }function (d) { return d.time}
                , { fixed: 'right', title: '操作', toolbar: '#tb', width: 150, align: 'center' }
            ]]
            , page: true
            , skin: 'row'
            , even: true
            , cellMinWidth: 120
            , done: function () {
                // 绑定表格工具栏按钮的触发事件
                bindTableToolbarFunction();
            }
        });
        function bindTableToolbarFunction() {
            $("#adduser").on("click", function (event) {
                layer.open({
                    type: 2,
                    content: "/Admin/AddUser",
                    title: "新增用户",
                    area: ["1400px", "810px"],
                })
                $("#search").click();
            })

            $("#search").on("click", function () {
                table.reload("userTable", {
                        page: { curr: 1 },
                        where: { keyword: $("#keyword").val() }
                    }
                    , 'data');
            })

        }

        //头工具栏事件
        table.on('toolbar(userTable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'search': $("#search").click();
                    break;
                case 'adduser': $("#adduser").click();
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                //layer.confirm('真的删除行么', function (index) {
                //    $.ajax({
                //        type: "post",
                //        url: "/Admin/EidtUser"
                //    })
                //    layer.close(index);
                //});
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        type: "post",
                        url: "/system/deleteuser?id=" + data.id,
                        success: function (result) {
                            if (result.success == true) {
                                layer.msg(result.message, {
                                    icon: 1,
                                    time: 2000,
                                    end: function () {
                                        $("#search").click();
                                    }
                                });
                            }
                            else if (result.success == false) {
                                layer.msg(result.message, { icon: 2, time: 2000 });
                            }
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    content: "/Admin/UserDetail?student_id=" + data.student_id,
                    title: "修改用户信息",
                    area: ["1400px", "810px"],
                    end: function () {
                        $("search").click();
                    }
                })
            }
        });
    });
</script>

</body>
</html>
